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高 校 图 书信 网 站 版 式 设计 中 认 知心 理学 理论 的 应 用 * 
以 北京 大 学 图 书馆 英文 版 新 门户 改版 为 例 


目 吴越 ” 举 海 媛 ” 张 元 俊 ”最 华 
北京 大 学 图 书馆 ”北京 100871 


摘要 : [ 目的/ 意义] 互联 网 技术 的 飞速 发 展 持 续 不 断 地 影响 着 用 户 信息 获取 的 方式 与 途径 ,要 求 图 书馆 网 

站 从 原来 的 “以 内 容 为 中 心 ” 向 “以 用 户 为 重心 ”转型 。 了 解读 者 在 访问 网 站 过 程 中 获取 和 处 理 信息 的 认 知 机 
制 ,对 于 提高 图 书馆 网 站 可 用 性 ,维持 图 书馆 网 站 的 可 持续 发 展 十 分 重要 。[ 方 法 /过 程 ] 对 60 所 国内 外 综合 排 

靠 前 的 高 校 图 书馆 网 站 进行 在 线 调研 ,以 认 知 心理 学 理论 为 指导 ,对 网 站 的 版 式 设计 特点 进行 分 析 ; 并 以 北 
京 大 学 图 书馆 英文 版 门户 改版 为 实例 ,介绍 将 认 知 理论 应 用 在 英文 版 门户 改版 时 的 权衡 与 思考 。[ 结果 /结论 ] 
最 终 总 结 出 4 条 版 式 设计 的 经 验 :为 首 屏 而 设计 、 为 滚动 而 设计 、 为 分 类 而 设计 、 为 用 户 而 设计 ,以 期 在 其 他 图 
报馆 进行 网 站 改版 时 起 到 参考 作用 。 
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1 ”研究 意义 与 现状 结构 下 的 基于 人 类 认 知心 理 特性 的 购物 网 站 用 户 界 
at i 面 ,提出 了 购物 网 站 用 户 界面 设计 策略 ; 李 营 ”在 其 硕 
图 书馆 网 站 的 用 户 相 较 于 一 般 网 站 用 户 目的 性 更 。 士 论文 中 将 认 知 特性 相关 理论 运用 在 了 语言 才 


移动 
强 , 他 们 在 访问 图 书馆 网 站 时 通常 带 有 较为 明确 的 任 应 用 设计 上 ; 郭 燕 敬 所 将 认 知 负荷 理论 应 用 在 了 研究 


务 目 标 ( 如 检索 资源 /书籍 \ 查 看 开 馆 时 间 关注 活 动 信 性 学 习 网 站 设计 中 ; 张 宁 号 将 分 布 式 认 知 理论 的 资源 


忆 改 ) ,这 使 得 图 书馆 网 站 建设 区 别 于 普通 互联 网 网 站 。 模型 应 用 在 公共 信息 设备 界面 的 交互 设计 过 程 中 。 在 


建 这 ,应 更 加 肾 焦 用 户 目标 ,以 及 用 户 完成 这 一 目标 过 。 图 书馆 网 站 建设 方面 ,目前 鲜 有 论文 将 关注 点 放 在 认 


程 中 的 认 知 心理 。 基 于 用 户 认 知心 理 的 图 书馆 网 站 设 。 知心 理学 理论 上 。 国 内 高 校 图 书馆 网 站 设计 大 部 分 仍 


计 砚 以 用 户 为 中 心 的 一 种 设计 思路 , 它 可 以 有 效 地 提 属于 以 内 容 展示 为 主 的 类 型 ,还 没有 将 网 站 建设 的 重 

高 图 书馆 网 站 的 可 用 性 ,对 网 站 的 用 户 体验 进行 整体 心 转移 到 以 用 户 为 中 心 。 因 此 ,笔者 希望 从 用 户 认 知 

优化 。 心理 这 一 角度 着 手 ,重新 思考 图 书馆 网 站 建设 中 的 版 
认 知 心理 学 "是 一 门 研究 认 知 及 行为 背后 心智 处 。” 式 设计 范式 。 

理 的 心理 科学 ,以 信息 处 理 模式 研究 认 知 过 程 是 现代 

认 知心 理学 的 主流 。 它 将 人 脑 看 作 是 一 个 复杂 的 计算 。。 攻读 却 3 到 从 


机 系统 ,认为 认 知 就 是 信息 加 工 ,包括 对 感知 输入 的 信 ”2.1 短 时 记忆 


息 进 行 编码 贮存、 提取 的 全 过 程 。 由 于 电脑 的 隐喻 和 短 时 记忆 " 是 大 脑 信息 处 理 系统 的 核心 。 它 包含 
使 用 , 认 知 心理 学 在 人 机 交互 和 计算 机 相关 领域 应 用 人 脑 从 外 界 接 受 新 的 信息 ,对 信息 进行 加 工 并 存储 到 
广泛 。 长 时 记忆 ,以 及 从 长 时 记忆 中 提取 已 有 的 信息 。G. A. 


在 我 国 , 认 知心 理学 理论 已 被 一 些 研 究 者 用 于 网 Miller' "在 1956 年 的 研究 中 提 到 ,无 论 何 种 类 型 的 数 
站 界面 设计 。 赵 楠 "通过 深入 研究 交互 设计 框架 体系 据 , 大 脑 的 短 时 记忆 都 只 能 容纳 7 个 单位 量 。 为 了 让 
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大 脑 可 以 在 能 在 短 时 记忆 过 程 中 处 理 大 量 的 信息 ,在 
信息 加 工 的 过 程 中 ,将 信息 组 织 为 成 块 的 形式 十 分 重 
要 。 对 信息 进行 组 块 时 能 够 将 若干 个 单位 量 合 成 有 意 
义 . 较 大 信息 单位 的 加 工 过 程 。 彭 泉 等 中 在 2001 年 的 
论文 中 曾 述 了 短 时 记忆 在 应 用 系统 人 机 界面 设计 上 的 
意义 。S. Sternberg 等 (1 在 1969 年 的 研究 中 表明 ,在 短 
时 记忆 进行 信息 提取 时 ,记忆 集合 越 大 ,获取 信息 需要 
的 反应 时 间 越 长 。 
2.2 下 型 浏览 模式 
F 型 浏览 模式 由 美国 著名 网 站 可 用 性 专家 本 
Nielsen 于 2006 年 发 表 的 《眼球 轨迹 研究 》” 中 提出 。 
报告 中 提 到 通过 大 量 用 户 测试 实验 证 明 , 大 多 数 用 户 
都 会 以 了 形状 的 模式 浏览 整个 网 页 。F 型 浏览 , 即 首 
先进 行 水 平移 动 浏览 ,然后 目光 下 移 , 进 行 短 范围 的 水 
平移 动 浏览 ,最 后 沿 着 网 页 左 侧 , 进 行 垂直 扫描 浏览 。 
@ 格式 塔 理论 指导 的 设计 原则 
格式 塔 "是 德 文 “ Gestalt" 的 译音 ,可 指 配置 、 组 


3.1 为 首 屏 而 设计 

首 屏 ,英文 中 称 为 Above the fold'"” , 即 用 户 通过 
最 大 化 情况 下 的 浏览 器 访问 网 站 时 ,第 一 时 间 出 现在 
浏览 器 范围 内 的 网 站 内 容 。 为 首 屏 而 设计 的 概念 ,来 
源 于 报纸 行业 ,报纸 总 是 被 琶 成 一 半 的 样子 ,最 先 展 示 
在 读者 面前 的 是 折线 (fold) 上 的 内 容 ,这 是 最 吸引 眼 
球 ,对 报纸 销量 起 关键 作用 的 区 域 。 延 伸 到 网 站 设计 
中 ,折线 即 为 用 户 访问 网 站 时 ,不 需要 滚动 鼠标 就 可 以 
看 见 的 网 页 区 域 的 下 边缘 。F 型 浏览 模式 进一步 说 明 
了 网 页 首 屏 的 重要 性 。 

为 首 屏 而 设计 ,是 为 了 尽 可 能 优化 地 利用 首 屏 的 
空间 来 展示 网 站 中 最 重要 的 内 容 , 而 不 意味 着 要 将 所 
有 的 内 容 都 尽 可 能 多 的 堆积 在 首 屏 的 范围 内 。 在 调研 
中 可 以 看 出 ,国内 高 校 图 书馆 十 分 重视 首 屏 的 作用 ,有 
高 达 86.6% 的 网 站 直接 采用 了 单 屏 设计 ,完全 不 需要 
读者 使 用 鼠标 滚动 键 浏 览 页 面 。 然 而 ,它们 忽略 了 由 
于 大 脑 短 时 记忆 容量 的 限制 ,用 户 在 信息 量 超 负荷 的 


合肥 者 排版 , 它 是 一 种 对 人 类 在 观察 事物 过 程 中 下 意 
识 增 进行 分 组 行为 的 科学 解释 方法 。 格 式 塔 理论 明确 
地 百出 , 眼 脑 作用 是 一 个 不 断 组 织 . 简 化 .统一 的 过 程 ， 
> 是 通过 这 一 过 程 , 才 产 生出 易于 理解 .协调 的 整体 。 
晤 到 产生 出 了 格式 塔 的 一 系列 适用 于 布局 和 界面 设计 
的 讨 本 原则 ,如 相似 原则 接近 原则 .连续 原则 、 闭 合 原 
则 3 东单 原则 等 。 


3 ”国内 外 高 校 图 书馆 网 站 版 式 设计 现状 


总 结 与 分 析 
(5) 网 页 的 版 式 设 计 包 含 很 多 方面 ,笔者 着 眼 于 版 式 
设计 的 长 度 和 页 面 元 素数 量 对 60 个 国内 外 图 书馆 网 
站 进行 了 调研 ,并 结合 认 知 心理 理论 对 国内 外 高 校 图 
书馆 网 站 版 式 设计 现状 进行 了 总 结 与 分 析 。 
笔者 于 2016 年 9 月 启动 调研 工作 ,一 共 选 取 了 60 
个 高 校 图 书馆 的 网 站 。 其 中 ,调研 选取 的 国外 30 个 均 


页 面 中 难以 找到 目标 信息 的 这 一 问题 。 由 调研 数据 可 
以 看 出 ,大 多 数 国内 高 校 图 书馆 网 站 设计 在 采用 单 屏 
设计 的 同时 ,在 首 屏 中 设置 了 太 多 的 页 面 元 素 , 超 过 了 
短 时 记忆 的 容量 提 到 的 上 限 数字 7。 这 样 的 设计 试图 
在 有 限 的 空间 中 提供 过 多 的 功能 ,给 界面 带 了 过 多 的 
视觉 噪声 ,结果 只 会 加 重用 户 的 认 知 负荷。 根据 短 时 
记忆 的 信息 提取 理论 ,用户 需 要 进行 浏览 记忆 的 项 目 
越 多 ,反应 时 间 成 正比 增加 。 在 单 屏 设计 中 设置 过 多 
的 页 面 元 素 会 影响 用 户 的 理解 能 力 ,降低 其 在 网 站 中 
完成 既定 目标 的 速度 ,最 终 影响 网 站 的 用 户 体验 。 

3.2 为 滚动 而 设计 

国内 高 校 图 书馆 网 站 设计 受到 首 屏 尺寸 的 限制 ， 
通常 是 因为 担心 读者 不 会 关注 首 屏 以 外 的 内 容 , 认 为 
使 用 鼠标 深 轴 浏览 影响 用 户 使 用 。 在 J， Nielsen 早期 
的 研究 时 通过 调查 得 出 结论 只 有 10% 的 用 户 会 拉动 
鼠标 浏览 页 面 。 因 此 不 建议 网 页 的 长 度 长 于 屏幕 的 高 


来 自 USNEWS 排名 在 前 50 的 学 校 图 书馆 网 站 ,国内 
30 个 均 来 自 艾 瑞 深 中 国 校 友 会 网 排名 前 50 的 学 校 图 
书馆 网 站 。 本 次 调研 主要 针对 的 是 数字 图 书馆 网 站 网 
页 版 式 设计 中 首页 页 面 元 素 和 版 式 长 度 这 两 个 方面 。 
在 被 调研 的 30 个 国外 图 书馆 门户 网 站 中 ,53% 的 
网 站 在 首页 设置 了 5 个 以 上 页 面 元 素 ,83.3% 的 网 站 
是 超出 首 屏 的 网 页 版 式 设计 。 在 被 调研 的 30 个 国内 
高 校 图 书馆 门户 网 站 中 ,63. 6% 的 网 站 设置 了 7 个 以 
上 页 面 元 素 ,86. 6% 的 网 站 是 局 限于 首 屏 的 网 页 版 式 


该 计 
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度 。 而 在 其 1997 年 的 报告 "中 就 已 经 更 正 了 自己 的 
研究 结论 ,认为 网 站 设计 可 以 采用 滚动 版 式 。 

随 着 信息 技术 的 发 展 , 无 论 是 新 型 移动 设备 还 是 
传统 的 笔记 本 电脑 或 台式 机 的 屏幕 分 辩 率 都 在 飞速 增 
长 , 首 屏 折线 的 位 置 已 经 变 得 非常 模糊 。 根 据 国家 工 
业 和 信息 化 部 电信 研究 院 2015 年 发 布 的 《移动 互联 网 
白皮书 》" ,2014 年 全 球 手机 用 户 总 数 高 达 68 亿 ， 
2015 年 4 月底, 我国 移动 互联 网 用 户 已 达 9.05 亿 人 。 
在 全 球 移动 互联 网 流量 发 起 终端 占 比 中 ,手机 占 
31% ,平板 电脑 占 6.6% 。 随 着 尺寸 丰富 的 智能 移动 终 


吴越 ， 稚 海 媛 , 张 元 俊 , 等 . 高 校 图 书馆 网 站 版 式 设 计 中 认 知 心理 学 理论 的 应 用 
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端的 普及 ,移动 互联 网 重 塑 了 用 户 的 浏览 行为 习惯 。F 
型 浏览 模式 的 提出 也 同样 说 明了 滚动 已 经 成 为 了 用 户 
访问 网 站 的 一 个 必 备 行为 。 用 户 逐 渐 习 惯 通过 手指 滑 
动 或 鼠标 滚动 去 纵向 的 浏览 网 页 ,去 探索 了 型 浏览 模 
式 中 网 站 “F"” 的 垂直 边 的 内 容 。 

滚屏 版 式 设计 既 可 以 满足 在 门户 设置 多 项 页 面 元 
素 ,又 可 以 避免 在 首 屏 中 设置 过 多 内 容 增加 用 户 短 时 
记忆 负担 从 而 产生 信息 焦虑 情绪 。 高 校 图 书馆 网 站 是 
一 种 富 信息 服务 性 网 站 , 它 拥 有 多 重 角色 任务 ,不 仅 需 
要 提供 资源 的 检索 ,还 要 展示 图 书馆 的 各 类 读者 服务 ， 
同时 还 是 图 书馆 对 外 发 布 消息 的 重要 渠道 等 。 这 就 要 
求 高 校 图 书馆 网 站 门户 设置 丰富 的 页 面 元 素 以 满足 建 
立 网 站 的 功能 需求 。 由 图 1 可 以 看 出 ,美国 康 奈 尔 大 
学 将 少量 比较 常用 的 栏目 简洁 的 排列 在 了 首 屏 的 区 
域 5 软 后 利用 滚屏 版 式 设计 ,将 网 站 更 丰富 的 内 容 推送 
给 巴 访 问 者 。 除 此 ,对 比 笔者 在 2012 年 北京 大 学 图 书 
铺 可 户 改版 时 曾 做 过 一 次 国内 外 高 校 图 书馆 网 站 设计 
的 再 时,30 家 国外 高 校 图 书馆 中 只 4 有 499%6 的 网 站 采用 
六 议 屏 版 式 设计 。 经 过 4 年 ,基于 上 次 调研 的 30 个 网 
剖 昌 行 调研 的 结 才 果 显示 采用 滚 平版 式 设计 的 比例 增长 
也 39.3% ,达到 83.3% 。 可 见 滚屏 版 式 设计 正在 逐 步 


成 汐 国 外 图 书馆 网 站 设计 的 主流 趋势 。 


一 


左 : 北京 大 学 图 书馆 英文 版 网 站 


1 单 屏 版 式 设计 与 滚屏 版 式 设 计 的 对 比 


右 : 美国 康 奈 尔 大 学 图 书馆 网 站 


3.3 为 分 类 而 设计 

网 站 首页 中 每 个 模块 的 呈现 需要 一 个 焦点 , 称 为 
兴趣 中 心 或 重点 。 这 个 焦点 吸引 访问 者 的 注意 力 , 传 
达 这 个 模块 的 中 心 内 容 并 说 服 他 们 进一步 追踪 视觉 信 
息 。 网 站 通过 对 信息 进行 分 类 后 ,根据 格式 塔 心理 指 
导 的 设计 原则 ,可 以 采用 其 中 的 相似 原则 、 接 近 原 则 和 
简单 原则 制造 网 站 首页 中 的 视觉 焦点 ,以 更 高 效率 地 
向 访问 者 传达 信息 。 这 三 种 原则 在 应 用 到 网 站 设计 中 
时 ,最 根本 的 就 是 对 分 类 后 的 网 站 信息 进行 针对 性 的 
视觉 设计 。 在 调研 中 可 以 看 到 有 很 多 国外 高 校 图 书馆 


网 站 都 或 多 或 少 的 使 用 了 这 三 个 原则 。 
3.3.1 相似 原则 ”相似 原则 强调 内 容 。 具 有 共同 特 
性 的 元 素 ( 如 形状 、 大 小 、 颜 色 等 ) 容易 在 人 的 认 知 中 
被 组 织 在 一 起 。 如 图 2 所 示 , 美 国 斯 坦 福 大 学 图 书馆 
的 网 站 设计 就 利用 了 这 一 原则 ,将 各 类 信息 用 不 同 的 
形状 ,边框 和 颜色 组 织 起 来 。 它 将 展览 活动 设计 成 了 
灰色 边框 的 日 历 项 ,里 面 简 要 介绍 活动 的 时 间 标题 和 
简介 。 


Events, workshops, exhibits 


The Cultural Revolution and 


Modelsand Copies 
nm 


图 2 美国 斯 坦 福 大 学 图 书馆 网 站 首页 的 活动 展览 模块 


3.3.2 接近 原则 接近 原则 强调 位 置 。 当 元 素 之 间 
的 间 际 越 小 ,就 越 容易 被 组 合 在 一 起 。 如 图 3 所 示 , 美 
耶鲁 大 学 图 书馆 的 网 站 就 将 分 类 好 的 信息 用 间隙 小 
的 方式 进行 排列 ,从 视觉 上 很 容易 就 能 分 辨 出 这 一 
域 有 三 大 块 内 容 : 人 研究 .服务 和 开 馆 时 间 。 
Em [E77 
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3 美国 耶鲁 大 学 图 书馆 网 站 首页 的 研究 、 
服务 和 开 馆 时 间 模 块 


3.3.3 ”简单 原则 ”简单 原则 强调 极 简 。 美 国 普 林 基 
顿 大 学 图 书馆 的 网 站 为 了 强调 “搜索 ”这 一 图 书馆 网 
ied ep dai 
照片 作为 背景 ,只 设置 了 “资源 搜索 "这 一 个 功能 。 如 
图 4 所 示 


国 中 BRARY 


图 4 美国 普林斯顿 大 学 图 书馆 网 站 首页 
的 一 站 式 搜索 栏 
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4 北京 大 学 图 书馆 的 英文 版 门户 改版 


中 的 权衡 和 实践 

高 校 图 书馆 网 站 不 仅 是 图 书馆 对 外 宣传 的 形象 窗 
口 ,更 是 协助 读者 查找 资源 的 高 可 用 性 信息 获取 工具 。 
北京 大 学 图 书馆 英文 版 旧 门户 (如 图 5 所 示 ) 发 布 于 
2009 年 ,属于 信息 较为 拥挤 的 单 屏 网 页 版 式 设计 。 在 
新 信息 环境 下 ,旧版 门户 已 经 不 能 很 好 的 满足 英文 用 
户 对 网 站 可 用 性 的 要 求 。 为 了 更 好 地 提高 贴 合 新 的 用 
户 行为 习惯 ,提高 网 站 可 用 性 ,北京 大 学 图 书馆 于 
2016 年 对 英文 版 门户 进行 了 全 面 的 改版 。 
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图 5 北京 大 学 图 书馆 英文 版 旧 门 户 截图 


网 站 改版 对 于 可 以 快速 接受 新 鲜 事物 的 年 轻 层 读 
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朝 肢 响 不 大 ,而 对 于 北京 大 学 很 多 高 年 龄 段 或 工作 中 
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6 ”北京 大 学 图 书馆 英文 版 新 门户 的 首 屏 截图 


成 英文 后 所 占 的 宽度 变 大 影响 用 户 体验 和 页 面 美观 的 
问题 ,新 版 设计 将 原本 中 文 版 中 与 logo 同 空间 靠 右 显 
示 的 导航 设计 成 独立 成 立 导航 空间 ,这 样 可 以 允许 导 
航 在 现 阶段 和 未 来 进行 更 新 都 不 再 受到 空间 限制 。 
4.2 为 滚屏 而 设计 ,减少 用 户 认 知 负荷 ,纵向 扩展 门 
户 的 容量 

网 站 的 主页 就 像 报纸 的 封面 新 闻 一 样 重要 ,可 如 
果 将 图 书馆 网 站 提供 的 咨询 和 服务 全 部 罗列 在 首 屏 范 


较 嚼 初级 下 联网 的 文史 类 老师 来 说 ,会 产生 一 定 程度 
的 乘 便 。 新 版 的 设计 必须 在 最 大 化 提高 网 站 可 用 性 ， 
紧 臣 网 站 设计 趋势 的 情况 下 ,照顾 旧版 门户 用 户 的 使 
用 习惯 ,引导 他 们 适应 新 的 网 页 版 式 。 网 站 阶段 性 改 
版 过 程 中 一 项 很 难 的 工作 就 是 版 式 的 选择 ,必须 仔细 
权衡 才能 决定 是 保持 原 有 的 单 屏 版 式 设计 ,还 是 打破 
首 屏 的 局 限 进行 设计 。 最 终 , 在 充分 研究 相关 认 知 理 
论 后 ,北京 大 学 图 书馆 选用 了 滚屏 版 式 。 见 图 6。 
4.1 为 首 屏 而 设计 ,突出 重点 的 功能 和 服务 

英文 版 新 门户 在 首 屏 的 范围 内 设置 了 网 站 最 重要 
的 页 面 元 素 :导航 、 标 签 式 检索 栏 .最 新 消息 /资源 最 
活动 .咨询 台 。 新 设计 中 基本 将 旧 英 文 门户 首 屏 中 展示 
的 所 有 内 容 都 在 首 屏 的 范围 内 进行 了 展示 。 老 用 户 几 
乎 不 需要 滚动 鼠标 既 可 以 对 网 站 大 部 分 内 容 进行 浏览 。 

对 于 导航 区 域 ,旧版 门户 中 的 导航 没有 完整 的 展 
示 图 书馆 的 所 有 资源 和 服务 ,而 是 做 了 删 减 ,这 样 的 设 
计 就 会 造成 英文 用 户 找 不 到 特定 的 信息 。 新 的 设计 采 
用 了 和 中 文 版 网 站 统一 的 导航 。 但 由 于 导航 栏目 翻译 
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围 ,会 导致 用 户 在 扑面 而 来 的 文字 列表 中 受到 太 多 信 
息 干 扰 而 最 终 找 不 到 自己 需要 的 内 容 。 滚 屏 设 计 延伸 
了 网 页 的 长 度 ,通过 合理 的 排版 ,可 以 在 网 站 主页 展示 
丰富 的 内 容 。 新 设计 中 无 论 是 首 屏 还 是 滚动 后 的 第 二 
屏 ,都 对 内 容 进 行 组 块 以 减少 用 户 记忆 单位 量 , 将 页 面 
的 元 素 控制 在 了 7 个 以 内 。 在 首 屏 中 ,新 设计 采用 格 
式 塔 简单 原则 , 紧 追 自 适 应 网 页 设计 趋势 ,使 用 了 宽屏 
自 适应 大 图 ,重点 凸显 搜索 栏 。 

4.3 为 分 类 而 设计 

新 设计 页 面 从 上 到 下 可 分 为 三 大 部 分 。 在 页 面 的 
第 二 部 分 和 第 三 部 分 ,新 设计 充分 结合 格式 塔 相似 原 
则 和 接近 原则 ,将 信息 进行 了 分 类 组 织 ,在 视觉 上 还 留 
出 了 大 量 空白 作为 间距 ,将 页 面 分 成 了 五 大 块 :新 闻 、 
图 片 新 闻 、 热 门 服务 或 链接 、 服 务 与 资源 。 这 样 的 设计 
希望 给 读者 的 视觉 以 秩序 和 合理 的 休 苞 的 同时 ,方便 
读者 在 深 动 到 第 二 屏 时 可 以 将 间距 较 近 的 内 容 进 行 快 
速 分 组 和 高 效 浏览 。 

4.4 ”为 用 户 而 设计 ,引导 老 用 户 进行 滚屏 浏览 

在 格式 塔 理论 的 连续 原则 和 闭合 原则 中 都 提 到 ， 


吴越 ， 容 海 媛 , 张 元 俊 , 等 . 高 校 图 书馆 网 站 版 式 设计 中 认 知 心理 学 理论 


为 例 [ 可 .图 书 情报 工作 ,2018 ,62(10) :25 - 29. 


以 北京 大 学 和 2 


伦 的 应 用 


浏览 者 通常 会 把 一 种 不 连贯 的 有 和 缺口 的 图 形 尽 可 能 在 
心理 上 使 之 趋 合 , 倾 向 于 从 视觉 上 封闭 那些 开放 或 未 
完成 的 轮廓 ,或 者 在 心理 上 连接 上 实物 形象 上 的 不 连 

新 设计 将 门户 版 式 纵向 可 粗略 分 成 两 个 部 分 ,一 
部 分 是 搜索 栏 区 域 , 一 部 分 是 下 面 的 文字 性 内 容 区 域 。 
新 设计 利用 访问 者 心理 上 的 这 种 连续 、 闭 合 的 推论 倾 
向 ,在 首 屏 范围 内 只 显示 了 第 一 部 分 和 第 二 部 分 一 半 
的 内 容 。 让 读者 在 浏览 网 页 时 只 看 到 第 二 部 分 的 头 
部 ,根据 人 脑 自 下 而 上 信息 驱动 的 模式 构建 理论 和 格 
式 塔 闭合 原则 ,读者 自然 而 然 就 会 推断 出 下 面 还 有 内 
容 , 随 之 滑动 鼠标 进行 浏览 


小 结 
一 笔者 通过 分 析 和 总 结 高 校 图 书馆 网 站 版 式 设计 调 


研 的 结果 ,应 用 认 知 心理 学 理论 对 国内 外 高 校 图 书馆 
dd an rad 
践 经 验 ,总 结 了 4 条 版 式 设计 经 验 ,以 期 能 供 其 他 图 书 
饶 志 行 网 站 改版 时 借鉴 参考 :为 首 屏 而 设计 ,重视 首 屏 
:后 尊 容 的 设置 和 排版 ,但 不 受 限 于 首 屏 ;为 滚动 而 设 
局 雏 向 延伸 网 页 版 式 长 度 ,丰富 门户 内 容 ;为 分 类 而 
设 消 ,对 网 站 内 容 进行 梳理 .归并 和 分 组 ,对 同 组 内 容 
性 的 采用 格式 塔 设计 基本 原则 进行 视觉 上 的 排 
用 户 认 知 负荷 ;为 用 户 而 设计 ,重视 新 老 用 户 
对 本 网 站 改版 的 体验 ,引导 老 用 户 适应 新 办 


[se] 


M]. 


南 。 基 于 认 知 心理 的 购物 网 站 用 户 界面 设计 研究 [ M]. 无 
: 江南 大 学 , 2012. 
巧 .基于 认 知 特性 的 语言 教育 移动 应 用 设计 研究 [ M1]. 长 
>: 湖南 大 学 ,2012. 

[4 ] 郭 燕 燕 . 基于 认 知 负荷 理论 的 研究 性 学 习 网 站 设计 与 应 用 


[DJ]. 济南 :山东 师范 大 学 , 2012. 
[ 5 ] 张 守 . 基于 认 知 负荷 的 公共 信息 设备 界面 设计 研究 LD]. 大 
连 : 大 连 海事 大 学 ,2013. 
[ 6] DEUTSCH D, DEUTSCH J A. Short-term memory [ M]. New 
York: Academic Press, 1975. 


[7] MILLER G A. The magical number seven, plus or minus two: 
some limits on our capacity for processing information [J ]. Psycho- 
logical review ,1956, 63 (2): 81 -82. 
[ 8 ] 彭 泉 , 崔 德 光 . 基于 人 类 认 知 规律 的 应 用 系统 人 机 界面 设计 
[中 .计算 机 工程 与 应 用 , 2001, 37(19) : 148 -150. 

[ 9 ] STERNBERG S$. Memory -scanning: mental processes revealed by 


reaction -time experiments [J]. American scientist,1969, 57(4): 
421 -457. 

[10] NIELSEN J. F-shaped pattem for reading web content [ EB/OL]. 
[2017 - 10 -20]. http://www. nngroup. com/articles/f -shaped - 
pattern Teading -web -content. 

[11] Wikipedia. Gestalt psychology [ EB/OL]. [2017 -10-20]. hr 
tp://en. wikipedia. org/ wiki/ Gestalt_psychology. 

[12] MENSING D, GREER J D. Above the fold: a comparison of the 

lead stories in print and online newspapers[ EB/OL]. [2017 -10 

—20]. https://www. researchgate. net/ profile/ Donica_ Mensing/ 

publication/288950744_Above_the_fold_A_comparison_of_the_ 

lead_stories_in_print_and_online_newspapers. 

NIELSEN J. Changes in web usability since 1994 [ EB/OL]. 

[2017 - 10 -21]. http://www. nngroup. com/articles/changes -in 

-web -usability -since -1994/. 

[14] 工信部 . 移动 互联 网 白皮书 [EB/OL]. [2018 -01 -11].， ht- 
tp://Wwww. cac. gov. en/files/pdf/baipishu/ mobileIntermet2015. 


[13 


Pi 


pdf. 
作者 贡献 说 明 : 


吴越 ;论文 全 文 的 整体 撰写 ,英文 版 改版 的 整体 设计 ; 

骸 海 组; 论文 摘要 的 修改 ,英文 版 改版 的 设计 咨询 与 指 
导 ，; 

张 元 俊 : 论 文 第 四 节 的 修改 ,英文 版 改版 的 前 端 实现 ; 

奢华 :论文 全 文 的 修订 ,英文 版 改版 的 设计 咨询 。 


Library Website Layout Design Study Based on Cognitive Psychology Theory 
一 一 人 Case Study of Peking University Library English Website 
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Abstract: [Purpose/significance | User friendly interface has a direct impact on website usability. It’ s important to 


study how user think when interacting with a website page. 


| Method/process | This paper conducted a peer study in 


2016 about university library website layout design both at home and abroad, implementing cognitive psychology theories. 


And the paper takes Peking University Library English Website as an example to introduce how to implement related cogni- 


tive psychology theories in actual situations. [ Result/conclusion | To sum up, the paper gives three suggestions in layout 


design : design for the fold; design for scrolling; design for grouping; design for users. 


Keywords: cognitive psychology human computer interaction 
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